<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>结算投注记录</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        .form-label {
            font-weight: 500;
        }
        .result-preview {
            font-size: 1.2rem;
            font-weight: bold;
        }
        .profit { color: #28a745; }
        .loss { color: #dc3545; }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>结算投注记录</h2>
            <a href="${pageContext.request.contextPath}/bet/list" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>

        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label class="form-label">联赛</label>
                            <div class="form-control-plaintext">${record.leagueName}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label class="form-label">比赛</label>
                            <div class="form-control-plaintext">${record.homeTeam} VS ${record.awayTeam}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label class="form-label">投注金额</label>
                            <div class="form-control-plaintext">${record.betAmount}</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label class="form-label">水位</label>
                            <div class="form-control-plaintext">${record.odds}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <form action="${pageContext.request.contextPath}/bet/settle" method="post" class="needs-validation" novalidate>
            <input type="hidden" name="id" value="${record.id}">
            <input type="hidden" name="betAmount" value="${record.betAmount}">
            <input type="hidden" name="odds" value="${record.odds}">
            
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">主队得分</label>
                        <input type="number" name="homeScore" class="form-control" 
                               value="${record.homeScore}" required min="0">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">客队得分</label>
                        <input type="number" name="awayScore" class="form-control" 
                               value="${record.awayScore}" required min="0">
                    </div>
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">比赛结果</label>
                <select name="betResult" class="form-select" required onchange="calculateResult()">
                    <option value="">请选择</option>
                    <option value="WIN">赢</option>
                    <option value="HALF_WIN">赢一半</option>
                    <option value="DRAW">和</option>
                    <option value="HALF_LOSE">输一半</option>
                    <option value="LOSE">输</option>
                </select>
            </div>
            
            <div class="mb-3">
                <label class="form-label">结果金额</label>
                <div class="result-preview mb-2" id="resultPreview"></div>
                <input type="number" name="resultAmount" id="resultAmount" class="form-control" 
                       value="${record.resultAmount}" readonly>
            </div>
            
            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-lg"></i> 保存结算
                </button>
            </div>
        </form>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function calculateResult() {
        const betAmount = parseFloat(document.querySelector('input[name="betAmount"]').value);
        const odds = parseFloat(document.querySelector('input[name="odds"]').value);
        const betResult = document.querySelector('select[name="betResult"]').value;
        let resultAmount = 0;
        
        switch(betResult) {
            case 'WIN':
                resultAmount = betAmount * odds;
                break;
            case 'HALF_WIN':
                resultAmount = betAmount * odds * 0.5;
                break;
            case 'DRAW':
                resultAmount = 0;
                break;
            case 'HALF_LOSE':
                resultAmount = betAmount * -0.5;
                break;
            case 'LOSE':
                resultAmount = -betAmount;
                break;
        }
        
        document.getElementById('resultAmount').value = resultAmount.toFixed(2);
        const preview = document.getElementById('resultPreview');
        preview.textContent = resultAmount >= 0 ? `+${resultAmount.toFixed(2)}` : resultAmount.toFixed(2);
        preview.className = `result-preview ${resultAmount >= 0 ? 'profit' : 'loss'}`;
    }
    
    // 页面加载完成后，如果已有比赛结果，则计算结果金额
    document.addEventListener('DOMContentLoaded', function() {
        const betResult = document.querySelector('select[name="betResult"]').value;
        if (betResult) {
            calculateResult();
        }
    });
    
    // 表单验证
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation')
        Array.prototype.slice.call(forms).forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                // 提交前重新计算结果金额
                calculateResult();
                form.classList.add('was-validated')
            }, false)
        })
    })()
    </script>
</body>
</html> 